<template>
    <div class="zBox">
        <div class="topbox">
            <!-- <el-tabs v-model="applyactiveName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="我收到的" name="myCopy" v-hasPermi="['daily:workReport:receive']"></el-tab-pane>
                <el-tab-pane label="我发送的" name="mySend" v-hasPermi="['daily:workReport:transmit']"></el-tab-pane>
            </el-tabs> -->
            <div class="t1" :key="1" :class="{ isActive: active == 1 }" @click="setActive(1)" v-hasPermi="['daily:workReport:receive']">我收到的</div>
            <div class="t2" :key="2" :class="{ isActive: active == 2 }" @click="setActive(2)" v-hasPermi="['daily:workReport:transmit']">我发送的</div>
        </div>
        <div class="bottom">
            <div class="bottomCenter" >
                <div v-show="active == 1" :key="active" style="height:95%;" >
                    <!-- <el-row>
                        <el-col :span="24"></el-col>
                    </el-row> -->
                    <el-table v-loading="loading" :data="workReportList" stripe>
                        <el-table-column label="标题" align="center" prop="title"  />
                        <el-table-column v-if="active == 1"  label="发送人" align="center" prop="createBy">
                        </el-table-column>
                        <el-table-column v-if="active == 1" label="部门" align="center" prop="deptName">
                        </el-table-column>
                        <el-table-column label="发送时间"  align="center" prop="createTime">
                            <template #default="scope">
                                <span >{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态"  align="center" prop="isRead" >
                             <template #default="scope">
                                <span class="isread"  :class="{ read: scope.row.isRead == 1 }">{{ scope.row.isRead ? '已读':'未读' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-button  class="addButton"  @click="getRow(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="total > 0"
                        :total="total"
                        v-model:page="queryParams.pageNum"
                        v-model:limit="queryParams.pageSize"
                        @pagination="getReportList"
                    />
                </div>  
                <div v-show="active == 2" :key="active">
                    <el-row>
                        <el-col :span="24"> <el-button :icon="Edit" @click="pubWorkReport"  type="primary">发布汇报</el-button></el-col>
                    </el-row>
                    <el-table v-loading="loading" :data="workReportListTow" stripe >
                            <el-table-column label="标题" align="center" prop="title"  />
                            <el-table-column  label="收件人" align="center" prop="sendUserName">
                                <template #default="scope">
                                    <span class="hidSjr">{{ scope.row.sendUserName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="发送时间"  align="center" prop="createTime">
                                <template #default="scope">
                                    <span >{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态"  align="center" prop="isRead" >
                                 <template #default="scope">
                                    <span class="isread"  :class="{ read: scope.row.isRead == 1 }">{{ scope.row.isRead ? '已读' : '未读' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template #default="scope">
                                    <el-button  class="addButton" v-if="active == 2 && scope.row.isEdit == 1" @click="updRow(scope.row)" >编辑</el-button>
                                    <el-button  class="addButton"  @click="getRow(scope.row)" >查看</el-button>
                                    <el-button  class="removeButton" v-if="active == 2 && scope.row.isEdit == 1" @click="delRow(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination
                            v-show="totalTow > 0"
                            :total="totalTow"
                            v-model:page="queryParamsTow.pageNum"
                            v-model:limit="queryParamsTow.pageSize"
                            @pagination="getReportList"
                        />
                </div>
            </div>
            
    	</div>
        <el-dialog
                v-model="dialogVisible"
                title="工作汇报"
                width="45%"
                :before-close="handleClose"
                :close-on-click-modal="false" 
                :close-on-press-escape="false"
            >
             <getReport :myDailyList="myDailyList" :active="active"></getReport>
          </el-dialog>
          <el-dialog class="deleteDialog" :close-on-click-modal="false" :close-on-press-escape="false" v-model="deleteDialog" title="" top="30vh" width="20.5%">
                <img width="50" height="50" src="../../assets/images/mainImg/gth.png" />
                <p class="blk">您确认要删除这条信息么？</p>
                <p class="red">删除操作不可恢复</p>
                <template #footer>
                    <span class="dialog-footer" style="text-align: center;">
                        <el-button @click="deleteDialog = false">取消</el-button>
                        <el-button type="primary" @click="deleteData()">确定</el-button>
                    </span>
                </template>
            </el-dialog>
    </div>

</template>
<script setup>
import { Edit } from '@element-plus/icons-vue'
import { getWorkReportList , getDetail ,deleteWorkReport, updWorkReport } from '@/api/workReport';
import getReport from './getReport.vue';
import { ElMessage } from 'element-plus';
import mydailyStore from "@/store/modules/mydaily";
import useUserStore from '@/store/modules/user';
const useStore = useUserStore();
const route = useRoute();
const router = useRouter();
const store = mydailyStore();
const active = ref(1);
const loading = ref(true);
const loadingTow = ref(true);
const total = ref(0);
const totalTow = ref(0);
const workReportList = ref([]);
const workReportListTow = ref([]);
const deleteDialog = ref(false);
const myDailyList = ref([]);
let dialogVisible = ref(false);
let workReportId = ref(0);
const { proxy } = getCurrentInstance();
const accessList = ref(useStore.permissions);
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        type:'copy'
    },
    queryParamsTow: {
        pageNum: 1,
        pageSize: 10
    }
});
const { queryParams, queryParamsTow } = toRefs(data);
const setActive = (type) => {
    active.value = type;
    //getReportList(queryParams.value);
}
const isfbgzhb = computed(() => {
    return store.isfbgzhb;
})

const getReportList = (param) => {
    loading.value = true;
    getWorkReportList(param).then(res => {
        if (res.code === 200) {
            loading.value = false;
            if (param.type == 'copy') {
                workReportList.value = res.rows;
                total.value = parseInt(res.total);
            } else {
                workReportListTow.value = res.rows;
                totalTow.value = parseInt(res.total);
            }
        }
    })
}
const pubWorkReport = () => {
     router.push({ path: "/daily/addUpdWorkReport" })
}
//更新
const updRow = (row) => {
     store.reportList = row;
     proxy.$nextTick(() => {
        router.push({ path: "/daily/addUpdWorkReport" })
    })
}
//删除
const delRow = (row) => {
    deleteDialog.value = true;
    workReportId.value = row.id;
}
const deleteData = () => {
    deleteWorkReport(workReportId.value).then(res => {
        if (res.code == '200') {
            ElMessage({ message: '删除成功！', type: 'success', duration: 1 * 1000 })
            getReportList(queryParamsTow.value);
            deleteDialog.value = false
        } else {
            ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
        }
    })
}

const getRow = (row) => {
    let param = {
        reportId:row.id
    }
    getDetail(param).then(res => {
        if (res.code === 200) {
            myDailyList.value = res.data;
            dialogVisible.value = true;
            if ( row.isRead == 0 && active.value == 1) {
                updWorkReport(row.id).then(r => {
                    getReportList(queryParams.value);
                })
            }
        }
    });
    
}
const handleClose = (done) => {
    done();
}


if (accessList.value.indexOf('*:*:*') != -1 || (accessList.value.indexOf('daily:workReport:receive') != -1 && accessList.value.indexOf('daily:workReport:transmit') != -1)) {
    active.value = 1;
    getReportList(queryParams.value);
    getReportList(queryParamsTow.value);
} else {
    if (accessList.value.indexOf('daily:workReport:receive') != -1) {
        active.value = 1;
        getReportList(queryParams.value);
    }
    if (accessList.value.indexOf('daily:workReport:transmit') != -1) {
        active.value = 2;
        getReportList(queryParamsTow.value);
    }
}
watch(isfbgzhb, (newV, oldV) => {
    if (newV) {
        active.value = 2;
        getReportList(queryParamsTow.value);
    }
}, { immediate: true })


</script>

<style lang="scss" scoped>
$color:#BE1A21;
.zBox {
	height: 100%;
	// background-color: #ffffff;
	border-radius: 10px;
    padding: 0px 20px 0px 20px;
    height: 100%;
    overflow: auto;
	.topbox {
		display: flex;
		width: 61%;
		div {
			padding: 12px 55px;
			color: #fff;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			cursor: pointer;
		}
		div:nth-child(1) {
			background-color: #FFABB3;
            border-radius: 10px 10px 0px 0px;
		}
		div:nth-child(2) {
			background-color: #FFABB3;
            border-radius: 10px 10px 0px 0px;
		}
	}
    .bottom{
        border-radius: 0px 10px 10px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 94%;
        background: #fff;
        .bottomCenter{
            width: 98%;
            height: 98%;
            margin: auto;
            .el-row{
                height: 60px;
                line-height: 60px;
            }
        }
        
	}
}
:deep( .deleteDialog) {
	.el-dialog__body {
		text-align: center;
	}
	.blk {
		font-weight: 600;
		color: #000;
	}
    .el-dialog__footer{
        text-align: center;
    }
}
.isActive {
	color: #be1a21ff !important;
	background-color: #fff  !important;
}
.addButton{
    background: #FFDADE;
    border-color: #FFDADE;
    color:$color;
}
.removeButton{
    background: #EEEEEE;
    border-color: #EEEEEE;
    color:#999999;
}
.read{
    color:#999999 !important;
}
.isread{
    color:#BE1A21;
}
.pagination-container .el-pagination{
    position: absolute;
    right: 40%;
}
.el-message-box__title{
    span{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
}
.hidSjr{
    max-width: 18em;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>